{% extends 'front/layout/layout.html' %}

{% block content %}
    <div class="container">
        <div class="bloglist f_l">
            <ul>
                <li>
                    <div class="swiper-container swiper-container-initialized swiper-container-horizontal" style="height: 300px;">
                        <div class="parallax-bg"
                             style="z-index: 1; background-image: url(/static/front/images/1.jpg); transform: translate3d(0%, 0px, 0px);"
                             data-swiper-parallax="-23%"></div>
                        <div class="swiper-wrapper">
                            {% for cate in cates %}
                            <div class="swiper-slide swiper-slide-active" style="width: 1354px;">
                                <div class="title" data-swiper-parallax="-300"
                                     style="transform: translate3d(0px, 0px, 0px);">
                                    {{ cate.cate_name }}
                                </div>

                                <div class="text" data-swiper-parallax="-100"
                                     style="transform: translate3d(0px, 0px, 0px);">
                                    <p>{{ cate.describles }}</p>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination swiper-pagination-white swiper-pagination-clickable swiper-pagination-bullets">
                            <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0"
                                  role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet"
                                                                                        tabindex="0" role="button"
                                                                                        aria-label="Go to slide 2"></span><span
                                class="swiper-pagination-bullet" tabindex="0" role="button"
                                aria-label="Go to slide 3"></span></div>
                        <!-- Add Navigation -->
                        <div class="swiper-button-prev swiper-button-white swiper-button-disabled" tabindex="0"
                             role="button" aria-label="Previous slide" aria-disabled="true"></div>
                        <div class="swiper-button-next swiper-button-white" tabindex="0" role="button"
                             aria-label="Next slide" aria-disabled="false"></div>
                        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                    </div>
                </li>

                {% for article in articles %}
                    <li>
                        <h3 class="blogtitle">
                            <span>
                                <a href="/show/{{ article.id }}.html" title="css3" target="_blank"
                                   class="classname">{{ article.category.cate_name|safe }}</a>
                            </span>
                            <a href="/show/{{ article.id }}.html" target="_blank">
                                {{ article.title|truncatechars:5|safe }}
                            </a>
                        </h3>
                        <div class="bloginfo">
                            <span class="blogpic">
                                <a href="/show/{{ article.id }}.html"
                                   title="{{ article.seo_title|truncatechars:4|safe }}">
                                    {% if article.category.picture %}
                                        <img src="/{{ article.category.picture|safe }}"
                                             alt="{{ article.describles|truncatechars:5|safe }}">{% endif %}
                                </a>
                            </span>

                            <p id="neirong">{{ article.describles|truncatechars:150|safe }}</p>
                        </div>

                        <div class="autor">
                            <span class="lm f_l"></span>
                            <span class="dtime f_l">{{ article.add_time }}</span>
                            <span class="viewnum f_l">
                                浏览（<a href="/show/{{ article.id }}.html">{{ article.click }}</a>）
                            </span>
                            <span class="f_r">
                                <a href="/show/{{ article.id }}.html" class="more">阅读原文&gt;&gt;</a>
                            </span>
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>

        <div class="r_box f_r">
            <div class="tuwen">
                <h3 class="tit">图文推荐</h3>
                <ul>
                    {% for article in articles %}
                        <li>
                            <a href="/show/{{ article.id }}.html">
                                <i>
                                    {% if article.category.picture %}
                                        <img src="/{{ article.category.picture|safe }}"
                                             alt="{{ article.describles|safe }}">
                                    {% endif %}
                                </i>
                                <b>{{ article.category.cate_name|safe }}</b>
                            </a>
                            <p>
                                <span class="tulanmu">
                                    <a href="/show/{{ article.id }}.html">{{ article.title|truncatechars:4|safe }}</a>
                                </span>
                                <span class="tutime">{{ article.add_time }}</span>
                            </p>
                        </li>
                    {% endfor %}


                </ul>
            </div>
            <div class="ph">
                <h3 class="tit">所有栏目</h3>
                <ul class="rank">
                    {% for article in articles %}
                        <li>
                            <a href="/show/{{ article.id }}.html"
                               title="【{{ article.category.cate_name|safe }}】{{ article.title|safe }}"
                               target="_blank">【{{ article.category.cate_name|safe }}】{{ article.title|safe }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="ad">
                <img src="/static/front/images/03.jpg">
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
<script type=text/javascript>
    var swiper = new Swiper('.swiper-container', {
        speed: 600,
        parallax: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
    var tupian = $(".neirong + p > img");
    if (tupian) {
        tupian.remove()
    }
</script>
{% endblock %}
